import React, { Component } from "react";
import ReactDom from "react-dom";
import './index.css'

function App() {
    return <div className="box">
        <Warp />
    </div>
}

class Warp extends Component {
    // 定义组件中内部状态
    constructor() {
        super()
        this.state = {
            title:[
                "id--",
                "姓名--",
                "性别--",
                "成绩--",
                "等级--"
            ],
            list: [
                {
                    id:1,
                    name: "诸葛亮",
                    sex:'男',
                    score:98
                },
                {
                    id:2,
                    name: "周瑜",
                    sex:'男',
                    score:88
                },
                {
                    id:3,
                    name: "刘阿斗",
                    sex:'男',
                    score:50
                },
                {
                    id:4,
                    name: "曹植",
                    sex:'男',
                    score:90
                },
                {
                    id:5,
                    name: "张飞",
                    sex:'男',
                    score:70
                },
                {
                    id:6,
                    name: "曹丕",
                    sex:'男',
                    score:55
                },
            ],
/*             grade:{
            } */
        }
    }
    // 渲染视图
    render() {
        // 通过解构赋值拿到数据
        const { 
            title,
            list,
        } = this.state

        return <div>
            <p>
                {title}
            </p>
            {/*  <ul>
                 {list}
             </ul> */}
            <div>
              {/*   {
                    list.map(item => {
                        return <li>
                            { item.id }
                            {item.name}
                            {item.sex}
                            {item.score}
                        </li>
                    })
                } */}
            </div>
        </div>
    }
}


ReactDom.render(<App />, document.getElementById('root'), () => {
    console.log("渲染完成")
})